import React, { useState, useEffect } from "react";
import { Swiper, Card, Image, Input, Button, Space } from "antd-mobile";
import { DownFill, SearchOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { getCurrentCity } from "../../utils";

import "./index.less";
import Nav1 from "@/assets/images/nav-1.png";
import Nav2 from "@/assets/images/nav-2.png";
import Nav3 from "@/assets/images/nav-3.png";
import Nav4 from "@/assets/images/nav-4.png";
import HeaderTitle from "../../components/HeaderTitle";

// 导航栏菜单
const navmenuData = [
  { id: 1, img: Nav1, path: "/home/findroom", title: "整租" },
  { id: 2, img: Nav2, path: "/home/findroom", title: "合租" },
  { id: 3, img: Nav3, path: "/map", title: "地图找房" },
  { id: 4, img: Nav4, path: "/gohire", title: "去出租" },
];

const url = "http://192.168.9.228:9999";

export default function HomePage() {
  // 根据IP城市定位
  const [cityAddr, setCiytAddr] = useState({});

  // 轮播图
  const [swiperList, setSwiperList] = useState([]);

  // 租房小组数据
  const [groups, setGroups] = useState([]);

  // 最新资讯数据
  const [information, setInformation] = useState([]);

  // 编程式导航的hook
  const navigate = useNavigate();

  // componentDidMount 或者 componentDidUpdate
  useEffect(() => {
    cityLocate();
    getSwiperList();
    getGroupsList();
    getNewsInformation();
  }, []);

  // 根据IP城市定位
  async function cityLocate() {
    const city = await getCurrentCity();
    setCiytAddr(city);
  }

  // 获取banner数据
  async function getSwiperList() {
    try {
      const { data } = await axios.get(url + "/home/swiper");
      if (data.status && data.description === "请求成功") {
        setSwiperList(data.body);
      }
    } catch (error) {
      console.log(error);
    }
  }

  // 获取租房小组数据
  async function getGroupsList() {
    try {
      const { data } = await axios.get(url + "/home/groups", {
        params: {
          area: "AREA%7C88cff55c-aaa4-e2e0",
        },
      });
      if (data.status && data.description === "请求成功") {
        setGroups(data.body);
      }
    } catch (error) {
      console.log(error);
    }
  }

  // 获取最新资讯数据
  async function getNewsInformation() {
    try {
      const { data } = await axios.get(url + "/home/news", {
        params: {
          area: "AREA%7C88cff55c-aaa4-e2e0",
        },
      });
      if (data.status && data.description === "请求成功") {
        setInformation(data.body);
      }
    } catch (error) {
      console.log(error);
    }
  }

  // 渲染轮播图
  const banner = swiperList.map((item) => (
    <Swiper.Item key={item.id}>
      <img src={url + `${item.imgSrc}`} alt={item.alt} className="banner" />
    </Swiper.Item>
  ));

  // 渲染导航栏菜单
  const navmenu = navmenuData.map((item) => (
    <div key={item.id} className="navmenu-box" onClick={() => navigate(item.path)}>
      <img src={item.img} alt="" />
      <h2>{item.title}</h2>
    </div>
  ));

  // 渲染搜索框导航栏
  const searchNav = (
    <div className="searchNav">
      <div className="box">
        {/* <Button onClick={() => setVisible(true)}> */}
        <Button onClick={() => navigate("/citylist")}>
          <Space>
            <span className="box-span">{cityAddr.label || "城市"}</span>
            <DownFill className="downfill" />
          </Space>
        </Button>
        <div className="input-nav">
          <SearchOutline className="search-outline" />
          <Input
            className="nav-text"
            placeholder="请输入小区或地址"
            clearable
            onClick={() => navigate("/search")}
          />
        </div>
      </div>
      <i className="iconfont icon-map search-map-icon" onClick={() => navigate("/map")} />
    </div>
  );

  // 渲染租房小组
  const rentGroup = groups.map((item) => (
    <div key={item.id} className="rent-content-box">
      <div className="text">
        <div className="title1">{item.title}</div>
        <div className="title2">{item.desc}</div>
      </div>
      <img src={url + `${item.imgSrc}`} alt="" />
    </div>
  ));

  // 渲染最新资讯
  const newInfo = information.map((item) => (
    <Card key={item.id}>
      <Image src={url + `${item.imgSrc}`} width={141} height={89} fit="cover" />
      <div className="info-content">
        <div className="info-content-title">{item.title}</div>
        <div className="info-content-from">
          <span>{item.from}</span>
          <span>{item.date}</span>
        </div>
      </div>
    </Card>
  ));

  return (
    <>
      <div className="swiper-box">
        {/* 
            [antd-mobile: Swiper] `Swiper` needs at least one child.
            警告出现的时候，要判断是否渲染组件
        */}
        {swiperList.length > 0 ? (
          <Swiper autoplay loop>
            {banner}
          </Swiper>
        ) : null}

        {/* 搜索框导航栏 */}
        {searchNav}
      </div>

      {/* 菜单导航栏 */}
      <div className="navmenu">{navmenu}</div>

      {/* 租房小组 */}
      <div className="rent">
        <HeaderTitle title="租房小组" more="更多" />
        <div className="rent-content">{rentGroup}</div>
      </div>

      {/* 最新资讯 */}
      <div className="information">
        <HeaderTitle title="最新资讯" />
        {newInfo}
      </div>

      {/* 弹出城市选择框 */}
      {/* {cityPopup} */}
    </>
  );
}
